<template>
  <div>
    <!-- 添加地址表单 -->
    <el-form
      ref="add_address"
      :model="add_address"
      label-width="120px"
      :rules="rules"
    >
      <h5>{{ add_address.title }}</h5>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="add_address.name"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="add_address.phone"></el-input>
      </el-form-item>
      <el-form-item label="省市区" prop="selectedOptions">
        <el-cascader
          :options="options"
          v-model="add_address.selectedOptions"
          @change="addressChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="detailaddress">
        <el-input
          v-model="add_address.detail"
          :rows="2"
          type="textarea"
          placeholder="Please input"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="clear('add_address')">取消</el-button>
        <!-- 传值字符串，如果外面是双引号，里面单引号，不可都写双引号 -->
      </el-form-item>
    </el-form>

    <!-- 下面是地址列表： -->
    <h5>地址列表</h5>
    <div v-for="(item, index) in address_list" :key="index" class="addresslist">
      <el-descriptions
        :column="4"
        :size="size"
        direction="vertical"
        :style="blockMargin"
      >
        <el-descriptions-item label="姓名">{{
          item.name
        }}</el-descriptions-item>
        <el-descriptions-item label="电话">{{
          item.phone
        }}</el-descriptions-item>
        <el-descriptions-item :span="2">
          {{ item.default1 }}
        </el-descriptions-item>
        <el-descriptions-item label="收货地址">
          {{ item.address }}{{ item.detail }}
        </el-descriptions-item>
        <el-descriptions-item>
          <!-- <el-button type="primary" @click="edit_address(index)"
            >编辑</el-button
          > -->
          <el-button @click="del(index, item.id)">删除</el-button>
          <!-- <el-button>
            <em class="Default" v-if="item.isDefault">默认地址</em>
           <em v-else @click="setDefault(index)">设为默认</em>
          </el-button> -->
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
  <script>
// 引入表单
import { reactive } from "vue";
//引入省市区
import { regionData, CodeToText } from "element-china-area-data";
import {
  getaddressApi,
  addaddressApi,
  deladdressApi,
} from "../../api/goods.js";
import { useStore } from "vuex";
export default {
  name: "addresslist",
  data() {
    var reg = /^1[3456789]\d{9}$/;
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!reg.test(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        if (this.add_address.phone !== "") {
          this.$refs.add_address.validateField("phone");
        }
        callback();
      }
    };
    //const store = useStore()
    return {
      address_list: [],
      add_address: {
        title: "添加地址",
        name: "",
        phone: "",
        // selectedOptions: "请选择", //选择区域
        selectedOptions: ["110000", "110100", "110101"], //或者这里给一个默认省市区
        address: "北京市市辖区东城区", //省市区，另设addressText显示。
        detail: "",
        isDefault: "", //此地址是否默认
        addr_id: null, //作为点击保存时，是添加还是编辑的标识  null添加  非null编辑
      },
      options: regionData,
      rules: {
        phone: [{ validator: validatePass, trigger: "blur" }],
      },
      store: useStore(),
    };
  },

  async created() {
    this.getaddressApi();
  },
  methods: {
    async getaddressApi() {
      let data = await getaddressApi(this.store.state.user.user_id);
      console.log(data);
      this.address_list = data.List;
    },
    //省市区函数
    addressChange(arr) {
      // 此句为el-cascader的值
      var address =
        CodeToText[arr[0]] + CodeToText[arr[1]] + CodeToText[arr[2]];
      this.add_address.address = address;
    },
    //清空表单
    clear(formname) {
      this.$refs[formname].resetFields(); //此时传值应是字符串  this.clear("add_address")
    },

    // 添加新地址
    async onSubmit() {
      let data = await addaddressApi(
        this.add_address.address,
        this.add_address.detail,
        this.add_address.phone,
        this.add_address.name,
        this.store.state.user.user_id
      );
      this.getaddressApi();
    },

    //设置默认地址
    setDefault(index) {
      for (var i = 0; i < this.address_list.length; i++) {
        this.address_list[i].isDefault = i == index;
      }

      this.address_list.splice(0, 0, ...this.address_list.splice(index, 1)); //默认地址设在首位  ...展开运算符
      //保存进缓存
      localStorage.setItem("addresslist", JSON.stringify(this.address_list));
    },

    // 点击列表中每个地址的编辑时
    edit_address(index) {
      // 让渲染的add_address=此时选中的地址(index)
      var copy_obj = JSON.parse(JSON.stringify(this.address_list[index])); //复制列表里此地址obj
      copy_obj.title = "编辑地址";
      copy_obj.addr_id = index;
      this.add_address = JSON.parse(JSON.stringify(copy_obj));
    },

    async del(index, id) {
      this.address_list.splice(index, 1);
      //保存进缓存
      //localStorage.setItem("addresslist", JSON.stringify(this.address_list));
      let data = await deladdressApi(this.store.state.user.user_id, id);
    },
  },
};
</script>
  
  <style scoped>
.Default {
  color: orange;
}
.addresslist {
  border-top: 1px solid darkgray;
}
h5 {
  text-align: left;
  font-weight: bold;
}
</style>
  
  